<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />
    <scroll-view class="scroll" v-if="shopArr.length" scroll-y @scrolltolower="scrollBottomFn">
      <view v-for="item in shopArr" :key="item.productId" class="s_contain">
        <view class="img">
          <image :src="item.url" mode="" />
        </view>
        <view class="detail">
          <view class="d_name">{{ item.productName }}</view>
          <view class="d_points">
            <view>
              <text class="p_num">{{ item.price }}</text>
              <text>积分</text>
            </view>
            <view class="d_btn" @click="handleExchange(item)">兑</view>
          </view>
        </view>
      </view>
      <view class="w_bottom">- 加载完成，共{{ shopArr.length }}条数据 -</view>
    </scroll-view>
    <noneState v-else></noneState>
    <view class="dialogSty" v-if="isshowDialog">
      <view class="contain" v-if="isShowSuccess">
        <view class="top">
          <image :src="dialogInfo.url" />
          <text>{{ dialogInfo.productName }}</text>
          <view>
            <text>消耗</text>
            <text class="num">{{ dialogInfo.price }}</text>
            <text>积分</text>
          </view>
        </view>
        <view class="d_input">
          <view>
            <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/f9fb081d794e4597a5dd4c1ed782575c.png" />
            <input type="text" placeholder="收件人姓名" :value="name" @input="changeName" />
          </view>
          <view>
            <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/f9fb081d794e4597a5dd4c1ed782575c.png" />
            <input type="tel" placeholder="收件人电话号码" :value="phone" @input="changePhone" maxlength="11" />
          </view>
          <view>
            <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/f9fb081d794e4597a5dd4c1ed782575c.png" />
            <input type="text" placeholder="收货地址" :value="address" @input="changeAddress" />
          </view>
        </view>
        <view class="d_btn">
          <view>
            <view class="cancel" @click="handleCancel">取消</view>
            <view class="confirm" @click="handleConfirm">确认兑换</view>
          </view>
        </view>
      </view>
      <view class="success" v-else>
        <view class="top">
          <text>兑换成功</text>
          <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/c3c96cda2891467381f385fd63907190.png"
            @click="handleClose" />
        </view>
        <view class="middle">
          <icon type="success" size="60" color="#71C465"></icon>
          <view class="m_text">兑换成功</view>
          <view class="m_bText">快递将在7个工作日内发出
            请耐心等待</view>
        </view>
        <view class="bottom" @click="handleClose">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProductInfoList, addOrder } from "@/api/pages/mine.js"
import noneState from '@/pages/recruit/components/noneState.vue'
import { verifyMobile } from '@/utils/toast'

export default {
  components: { noneState },
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "积分商城",
      },
      pageSize: 10,
      pageNum: 1,
      pageTotal: 1,
      shopArr: [
      ],
      isshowDialog: false,
      isShowSuccess: true,
      dialogInfo: '',
      name: '',
      phone: '',
      address: ''
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { 
  },
  mounted() {
    this.pageNum = 1
    this.getProductInfoListFun()
  },
  methods: {
    //打开兑换弹窗
    handleExchange(item) {
      this.dialogInfo = item
      this.isshowDialog = true
      this.isShowSuccess = true
      console.log(this.dialogInfo);
    },
    // 取消按钮
    handleCancel() {
      this.isshowDialog = false
    },
    // 确认按钮
    handleConfirm() {
      if (verifyMobile(this.phone)) {
        addOrder({
          productId: this.dialogInfo.productId,
          consigneeName: this.name,
          consigneePhone: this.phone,
          consigneeAddress: this.address
        }).then((res) => {
          if (res.code === 200) {
            this.isShowSuccess = false
            uni.showToast({
              title: '兑换成功'
            })
          }
        })
      }
    },
    // 关闭弹窗
    handleClose() {
      this.isshowDialog = false
    },
    // 获取积分商城列表
    getProductInfoListFun() {
      getProductInfoList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize)
          if (this.pageNum === 1) {
            this.shopArr = res.rows
          } else {
            res.rows.forEach((suc) => {
              this.shopArr.push(suc)
            })
          }
        }
      })
    },
    // 监听输入框事件
    changeName(e) {
      this.name = e.detail.value
    },
    changePhone(e) {
      this.phone = e.detail.value
    },
    changeAddress(e) {
      this.address = e.detail.value
    },
    // 监听滑动到底部
    scrollBottomFn() {
      this.pageNum += 1
      if (this.pageNum <= this.pageTotal) {
        this.getProductInfoListFun()
      } else {
        uni.showToast({
          title: '没有更多了',
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// .Water {
//  width: 100%;
// }

.scroll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 140rpx);

  .s_contain {
    display: flex;
    background: #fff;
    width: 702rpx;
    height: 208rpx;
    padding: 24rpx;
    justify-content: center;
    align-items: center;
    margin: 10rpx 0;
    box-sizing: border-box;


    .img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;

      >image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
      }
    }

    .detail {
      width: 515rpx;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      margin-left: 20rpx;

      >view {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
      }

      .d_name {
        font-size: 28rpx;
        color: #000000e0;
      }

      .d_points {
        display: flex;
        justify-content: space-between;

        text {
          font-size: 20rpx;
          color: #00000073;
        }

        .p_num {
          font-size: 36rpx;
          color: #FF9E24;
          margin-right: 10rpx;
        }

        .d_btn {
          width: 88rpx;
          height: 56rpx;
          background: #FF9E24;
          border-radius: 44rpx;
          color: #fff;
          text-align: center;
          line-height: 56rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

.dialogSty {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;

  .contain {
    width: 670rpx;
    height: 924rpx;
    background: #fff;
    border-radius: 32rpx;
    position: relative;

    .top {
      position: absolute;
      top: -40rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;

      >image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
      }

      >text {
        font-size: 32rpx;
        color: #000000e0;
        margin: 20rpx 0;
      }

      >view {
        font-size: 20rpx;
        color: #00000073;

        >.num {
          font-weight: 700;
          font-size: 36rpx;
          color: #FF9E24;
          margin: 0 10rpx;
        }
      }
    }

    .d_input {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 300rpx;

      >view {
        width: 588rpx;
        height: 106rpx;
        display: flex;
        align-items: center;
        border: 1px solid #E2E2E2;
        margin-bottom: 24rpx;
        border-radius: 24rpx;
        background: #fff;

        >image {
          width: 32rpx;
          height: 32rpx;
          margin: 0 20rpx;
        }

        >input {
          font-size: 28rpx;
        }
      }
    }

    .d_btn {
      width: 100%;
      margin-top: 100rpx;
      display: flex;
      justify-content: center;

      >view {
        width: 550rpx;
        height: 80rpx;
        display: flex;

        >view {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #000000e0;
        }

        .confirm {
          height: 80rpx;
          background: #FF9E24;
          border-radius: 44rpx;
          color: #fff;
        }
      }
    }
  }

  .success {
    width: 670rpx;
    height: 758rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 36rpx;
      color: #000000e0;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .middle {
      display: flex;
      flex-direction: column;
      align-items: center;

      .m_text {
        font-size: 36rpx;
        color: #000000e0;
        margin: 20rpx 0;
      }

      .m_bText {
        width: 278rpx;
        font-size: 24rpx;
        color: #00000073;
        text-align: center;
      }
    }

    .bottom {
      width: 390rpx;
      height: 80rpx;
      background: #FF9E24;
      border-radius: 44rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
      font-size: 28rpx;
    }
  }
}

.w_bottom {
  width: 100%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 24rpx;
  color: #00000033;
}
</style>
